<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath %>">
    <title>商品销售统计</title>
    <meta charset="utf-8">
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="<%=basePath %>js/common/echarts.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/common/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/common/highcharts.js"></script>
</head>
<body>
<div class="ibox">
    <div class="ibox-content bodycss">
        <!-- 表单搜索 开始 -->
        <section class="panel panel-padding ">
            <form class="layui-form layui-form-pane form-search" onsubmit="return false" method="get">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label" style="width: 120px">订单完成时间</label>
                    <div class="layui-input-inline">
                        <input name="startDate" id="startDate" value="" placeholder="请选择起始日期"
                               class="layui-input date-item" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                -- &nbsp;&nbsp;
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <input name="endDate" id="endDate" value="" placeholder="请选择截至日期"
                               class="layui-input date-item" placeholder="yyyy-MM-dd">
                    </div>
                </div>

                <div class="layui-form-item layui-inline"  style="background-color: #1E9FFF">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search" >
                        <i class="layui-icon"></i> 查询
                    </button>
                </div>
            </form>
        </section>

        <!-- 表单搜索 结束 -->
        <section class="panel panel-padding " >
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="eCharts-table" style="width:auto;height:400px;"></div>

            <table class="layui-table" id="tableReload" lay-filter="popedomLay" style="width:auto;height:350px;"></table>
        </section>


    </div>
</div>
</body>
<script type="text/javascript">

    function display(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('eCharts-table'));
        var _xtext = [];
        var _data1 = [];
        var _data2 = [];
        var _data3 = [];

        var json = data;
        for (var i = 0, l = json.length; i < l; i++) {
            for (var key in json[i]) {
                if (json[i]['goods_name'] != undefined && key == 'property') {
                    _xtext.push(json[i]['goods_name'] + '(' + json[i]['property'] + ')');
                } else if (json[i]['goods_name'] == undefined && key == 'property') {
                    _xtext.push('(' + json[i]['property'] + ')');
                }
                if (key == 'goods_amount') {

                    _data1.push(json[i]['goods_amount']);
                }
                if (key == 'arrived_amount') {

                    _data2.push(json[i]['arrived_amount']);
                }
                if (key == 'pay') {

                    _data3.push(json[i]['pay']);
                }
            }
        }
       /* console.log(_xtext);
        console.log(_data1);
        console.log(_data2);*/

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '商品销售统计'
            },
            tooltip: {},
            legend: {
                data:['商品销售金额','积分抵扣金额','实际收款金额']
            },
            xAxis: {
                axisLabel: {
                    interval:0,//坐标轴刻度标签的显示间隔
                    rotate:25 //标签倾斜的角度
                },
                data: _xtext
            },
            yAxis: {},
            series: [{
                name: '商品销售金额',
                type: 'bar',
                data: _data1
            },{
                name: '积分抵扣金额',
                type: 'bar',
                data: _data2
            },{
                name: '实际收款金额',
                type: 'bar',
                data: _data3
            }]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    }
</script>
<%--柱状图第二种方法--%>
<%--<script type="text/javascript">
    /*js和jstl标签混用*/
    function display(data) {
        var _xtext = [];
        var _data1 = [];
        var _data2 = [];
        var _data3 = [];

        /*console.log(data[1])*/
        /*data.forEach((v,i)=>{
            console.log(v,i)
        },this);*/
        var json = data;
        for (var i = 0, l = json.length; i < l; i++) {
            for (var key in json[i]) {
                if (json[i]['goods_name'] != undefined && key == 'property') {
                    _xtext.push(json[i]['goods_name'] + '(' + json[i]['property'] + ')');
                } else if (json[i]['goods_name'] == undefined && key == 'property') {
                    _xtext.push('(' + json[i]['property'] + ')');
                }
                if (key == 'goods_amount') {

                    _data1.push(json[i]['goods_amount']);
                }
                if (key == 'arrived_amount') {

                    _data2.push(json[i]['arrived_amount']);
                }
                if (key == 'pay') {

                    _data3.push(json[i]['pay']);
                }
            }
        }
        console.log(_xtext);
        console.log(_data1);

        var chart = {
            type: 'column',
            reflow: true,
        };
        var title = {
            text: '商品销售统计',
        };
        var yAxis = {
            allowDecimals: false,
            title: {
                text: '金额',
            }
        };
        var xAxis = {//X轴标签
            categories: _xtext,
            crosshair: true,
        };
        var series = [{
            name: "商品销售金额",
            data: _data1,
        }, {
            name: "积分抵扣金额",
            data: _data2,
        }, {
            name: "实际收款金额",
            data: _data3,
        }
        ]
        var tooltip = {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
        };
        var plotOptions = {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
            }
        };
        var credits = {
            enabled: false,
        };
        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        json.plotOptions = plotOptions;
        json.credits = credits;
        $("#eCharts-table").highcharts(json);
    }
</script>--%>

<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>

<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery","laydate"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        layui.common.init();
        //日期
        //同时绑定多个
        lay('.date-item').each(function(){
            laydate.render({
                elem: this
                ,theme: '#393D49'
                ,trigger: 'click'
            });
        });

        table.render({
            elem: "#tableReload"
            , width: 'auto'
            , url: 'count/querySalesCountMsg.do'
            , page: true //开启分页
            , even: true
            , skin: 'row'
            , limits: [10, 20, 30, 40, 50]
            , limit: 10
            , cols: [[
                {type: 'numbers', title: '序号', width: '120'}
                , {field: 'goods_name', title: '商品名称', width: 150, align: 'center'}
                , {field: 'property', title: '商品属性', width: 150, align: 'center'}
                , {field: 'goods_amount', title: '商品销售金额', width: 150, align: 'center'}
                , {field: 'arrived_amount', title: '积分抵扣金额', width: 150, align: 'center'}
                , {field: 'pay', title: '实际收款金额', width: 150, align: 'center'}
            ]]
            , done: function (res) {
               //console.log(res); //接口返回信息
                var data = res.data;
                //console.log(data)
                display(data);
            }
        });

        /**
         * 监听刷新表格
         */
        form.on('submit(search)', function (data) {

            console.log(data.field)
            /*console.log(JSON.stringify(data.field));*/
            table.reload('tableReload', {
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });
    });
</script>
</html>
